<template>
  <div class="operation-record-container">
    <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="fetchRecords"
    ></el-date-picker>
    <el-table :data="records" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="operator" label="操作人" width="180" />
      <el-table-column prop="operationType" label="操作类型" width="180" />
      <el-table-column prop="operationContent" label="操作内容" />
      <el-table-column prop="operationTime" label="操作时间" width="220" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import http from '@/axios/http';

const dateRange = ref([]);
const records = ref([]);

const fetchRecords = async () => {
  let startDate = null;
  let endDate = null;
  if (dateRange.value.length === 2) {
    startDate = dateRange.value[0];
    endDate = dateRange.value[1];
  }

  try {
    const response = await http.get('/glsb/operation-records', {
      params: {
        startDate: startDate ? startDate.toISOString().split('T')[0] : null,
        endDate: endDate ? endDate.toISOString().split('T')[0] : null,
      },
    });
    records.value = response.data;
  } catch (error) {
    console.error('获取操作记录失败:', error);
  }
};

onMounted(fetchRecords);
</script>